.sample {
  margin:0 0 10px;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:multiple;
  -moz-box-lines:multiple;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}


.container {
    position: relative;
    width: 300px;
    height: 200px;
  }

.image {
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: change-img-anim 30s infinite;
  }
  .image:nth-of-type(1) {
    animation: change-img-anim-first 30s infinite;
    animation-delay: 0s;
  }
  .image:nth-of-type(2) {
    animation-delay: 10s;
  }
  .image:nth-of-type(3) {
    animation-delay: 20s;
  }
  @keyframes change-img-anim-first {
    0%{ opacity: １;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
  }
  @keyframes change-img-anim {
    0%{ opacity: 0;}
    30%{ opacity: 1;}
    36%{ opacity: 1;}
    45%{ opacity: 0;}
    100%{ opacity: 0;}
  }

.hover-image-container {
  position: relative;
  width: 45%; /* 画像の幅を設定 */
}

.hover-image-container img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.image-hover {
    position: absolute;
    top: 0;
    left: 0;
    display: none; /* 最初は非表示 */
}

.hover-image-container:hover .image-default {
    display: none; /* ホバー時にはデフォルト画像を非表示 */
}

.hover-image-container:hover .image-hover {
    display: block; /* ホバー時にはホバー画像を表示 */
}

.profile-container {
  max-width: 80%; /* 修士2年と同じ幅に設定 */
  margin: 0 auto; /* 全体を中央揃え */
  text-align: left; /* テキストを左揃え */
  display: flex; /* フレックスボックスでレイアウト */
  flex-direction: column; /* 縦並び */
  align-items: flex-start; /* 左揃えに設定 */
  position: relative;
}

.profile-image {
  position: absolute;
  top: 60px; /* 上端からの位置 */
  right: 50px; /* 右端からの位置 */
  width: 30%; /* 親要素の幅を基準に動的に調整 */
  height: auto; /* アスペクト比を維持 */
  max-width: 300px; /* 最大幅を指定してバランスを確保 */
}

.profile-image img {
  width: 100%; /* 親要素に対して100%の幅 */
  height: auto; /* アスペクト比を維持 */
  aspect-ratio: 1 / 1; /* 正方形に固定 */
  object-fit: cover; /* 内容を切り取って枠に収める */
  margin-top: 0; /* 余分な余白を削除 */
}

.profile-text {
  width: 95%; /* テキスト部分が親要素の幅全体を使う */
  position: relative; /* 画像の基準を作成 */
  text-align: left; /* テキストを左揃え */
  margin-bottom: 20px; /* テキストと画像の間に余白 */
  margin-left: 20px; /* テキストを右に移動 */
}

.profile-text h3 {
  color: #5bb7ae; /* お好きな色に変更 */
  
}

.news-item {
  margin: 20px ; /* 親の余白に依存しない設定 */
  text-align: left; /* 親の中央揃えを上書き */
}

.news-header {
  display: flex;
  align-items: center;
  gap: 10px; /* 日付とタグの間隔 */
}

.news-date {
  font-size: 16px;
  color: #1a1919;
}

.tag {
  display: inline-block;
  background-color: #ff8800;
  color: white;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
} 

.tagorange { 
  display: inline-block;
  background-color: #ff8800;
  color: white;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
}

.tagred {
  display: inline-block;
  background-color: #eb6d6d;
  color: white;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
}

.tagblue {
  display: inline-block;
  background-color: #87b9eb;
  color: white;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: bold;
}